<template>
    <div>
        <!-- <div class="crm-name">{{data.crmName}}</div> -->
        <a-tabs v-model="activeKey">
            <a-tab-pane key="crm" tab="基本信息">
                <!-- 1.客户基本信息 -->
                <a-row v-if="saveBtnShow" style="line-height:52px; border-bottom:1px solid #bbb;">
                    <a-button class="crm-btn" type="primary" @click="SaveCustomer" ghost>
                        <a-icon type="save" theme="filled" />保存
                    </a-button>
                    <a-button class="crm-btn" type="primary" @click="()=>{showEdit = true}" ghost>
                        <a-icon type="edit" theme="filled" />编辑
                    </a-button>
                </a-row>
                <!-- 编辑模式 -->
                <div style="padding: 0 1rem;width:720px;margin-left:15px;padding-top:10px" class="crm-pane" v-show="showEdit">
                    <!-- 固定展示字段，且不可修改 -->
                    <nly-row class="form-inline">
                        <nly-col xs="12" sm="6" lg="6">
                            <form-input title="客户名称" labelStyle="" class="ml-1 mb-2" rightClass="myRightClass" :value="data.crmName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col xs="12" sm="6" lg="6">
                            <form-input title="客户编号" labelStyle="" class="ml-1 mb-2" rightClass="myRightClass" :value="data.crmNo" :readonly="true"></form-input>
                        </nly-col>
                        <!-- <nly-col xs="12" sm="6" lg="4">
                                    <form-input 
                                        title="客户拼音"
                                        labelStyle=""
                                        class="ml-1 mb-2"
                                        rightClass="myRightClass"
                                        :value="data.phonetic"
                                        :readonly="true"
                                    ></form-input>
                                </nly-col> -->

                        <!-- <nly-col xs="4">
                                    <a title="百度搜索" style="  margin-right: 5px;" href="javascript:getUrl(1)"> <img src="@/assets/image/baidulogo.jpg"></a>
                                    <a title="企查查"   style="  margin-right: 5px;" href="javascript:getUrl(2)"> <img src="@/assets/image/qichachalogo.jpg"></a>
                                    <a title="天眼查"   style="  margin-right: 5px;" href="javascript:getUrl(3)"> <img src="@/assets/image/tianyachalogo.jpg"></a>
                                </nly-col> -->
                    </nly-row>
                    <!-- 动态 表单  -->
                    <dynamic-form :formPostData="formPostData" :initFormData="initFormData" :errors="formErrors" :isOk="isFromShow" :showListStatus="false"></dynamic-form>
                    <div v-if="isCompany">
                        <a-divider orientation="left" style="margin:24px 0px;">往来分类</a-divider>
                        <contactsDynamicForm :formPostData="formPostData" :initFormData="contactsAttrData" :errors="formErrors" :isOk="isFromShow" :showListStatus="false"></contactsDynamicForm>
                    </div>
                    <a-divider orientation="left" style="margin:24px 0px;">其他信息</a-divider>
                    <nly-row class="form-inline ">
                        <nly-col sm="4">
                            <form-input title="创建人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.createUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="创建时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.createDate" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="修改人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.updateUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="修改时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.updateDate" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-if="data.crmType == 0">
                            <form-input title="释放人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.releaseUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-if="data.crmType == 0">
                            <form-input title="释放时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.releaseTime" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-else>
                            <form-input title="所属人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.collarUserName" :readonly="true"></form-input>
                        </nly-col>
                    </nly-row>
                </div>
                <!--查看模式-->
                <div style="padding: 0 1rem;width:720px;margin-left:15px;padding-top:10px;" class="crm-pane show-status" v-show="!showEdit">
                    <nly-row class="form-inline">
                        <nly-col xs="12" sm="6" lg="6">
                            <form-input title="客户名称" labelStyle="" class="ml-1 mb-2" rightClass="myRightClass" :value="data.crmName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col xs="12" sm="6" lg="6">
                            <form-input title="客户编号" labelStyle="" class="ml-1 mb-2" rightClass="myRightClass" :value="data.crmNo" :readonly="true"></form-input>
                        </nly-col>
                    </nly-row>
                    <dynamic-form :formPostData="formPostData" :initFormData="initFormData" :errors="formErrors" :isOk="isFromShow" :showListStatus="false"></dynamic-form>
                    <div v-if="isCompany">
                        <a-divider orientation="left" style="margin:24px 0px;">往来分类</a-divider>
                        <contactsDynamicForm :formPostData="formPostData" :initFormData="contactsAttrData" :errors="formErrors" :isOk="isFromShow" :showListStatus="false"></contactsDynamicForm>
                    </div>
                    <a-divider orientation="left" style="margin:24px 0px;">其他信息</a-divider>
                    <nly-row class="form-inline ">
                        <nly-col sm="4">
                            <form-input title="创建人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.createUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="创建时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.createDate" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="修改人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.updateUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4">
                            <form-input title="修改时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.updateDate" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-if="data.crmType == 0">
                            <form-input title="释放人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.releaseUserName" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-if="data.crmType == 0">
                            <form-input title="释放时间" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.releaseTime" :readonly="true"></form-input>
                        </nly-col>
                        <nly-col sm="4" v-else>
                            <form-input title="所属人" labelStyle="" inputStyle="border:0px;" rightClass="myRightClass" :value="data.collarUserName" :readonly="true"></form-input>
                        </nly-col>
                    </nly-row>
                    <!-- <div class="show-status-mask">

                    </div> -->
                </div>
            </a-tab-pane>
            <a-tab-pane key="linkMan" tab="联系人" v-if="linkManShow">
                <link-man :customer="data" :customerId="customerId"></link-man>
            </a-tab-pane>
            <a-tab-pane key="touch" tab="联系记录" v-if="touchShow">
                <touch :customer="data" :customerId="customerId" :activeKey="activeKey"></touch>
            </a-tab-pane>
            <a-tab-pane key="taskCallRecord" tab="电销记录" v-if="taskCallRecordShow">
                <simple-task-call-record :customer="data" :customerId="customerId" :activeKey="activeKey"></simple-task-call-record>
            </a-tab-pane>
            <a-tab-pane key="business" tab="商机管理" v-if="businessShow && !isCompany">
                <business :customer="data" :customerId="customerId"></business>
            </a-tab-pane>
            <!-- <a-tab-pane key="price" tab="报价单" v-if="priceShow">
                    <price :customer="data" :customerId="customerId" ></price>
                </a-tab-pane> -->
            <a-tab-pane key="consignee" tab="收货人信息" v-if="consigneeShow && !isCompany">
                <consignee :customer="data" :customerId="customerId"></consignee>
            </a-tab-pane>
            <a-tab-pane key="finance" tab="财务信息" v-if="financeShow">
                <finance :customer="data" :customerId="customerId"></finance>
            </a-tab-pane>
            <a-tab-pane key="files" tab="客户文档" v-if="filesShow && !isCompany">
                <crm-files :customer="data" :customerId="customerId"></crm-files>
            </a-tab-pane>
            <a-tab-pane key="requirement" tab="需求" v-if="requirementShow && !isCompany">
                <requirement :customer="data" :customerId="customerId"></requirement>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>


<script>
import { mapState } from "vuex";
import { DynamicForm, contactsDynamicForm } from "@/components/DynamicForm";
import { detail, Save as SaveCustomer } from "@/api/crm/customer";
import { DefineFieldList } from "@/api/crm/set";
import { initValidator, checkAll } from "@/utils/validator/validator";
import LinkMan from "@/views/crm/linkMan/list";     //联系人
import Touch from "@/views/crm/touch/list";         //联系记录
import Business from "@/views/crm/business/list";   //商机管理
import Price from "@/views/crm/price/list";         //报价单
import Consignee from "@/views/crm/consignee/list"; //收货人信息
import Finance from "@/views/crm/finance/list";     //财务信息
import CrmFiles from "@/views/crm/files/list";      //客户文档
import Requirement from "@/views/crm/requirement/list";      //需求
import SimpleTaskCallRecord from "@/views/crm/call/simpleTaskCallRecord";      //电销记录
import { getQueryVariable } from "@/utils/util";
import MiddleUtils from '@/utils/middle-utils'
export default {
    props: {
        routeUrl: {
            type: String,
            default: ''
        }
    },
    components: {
        DynamicForm,
        contactsDynamicForm,
        LinkMan,
        Touch,
        Business,
        Price,
        Consignee,
        Finance,
        CrmFiles,
        Requirement,
        SimpleTaskCallRecord
    },
    data () {
        return {
            customerId: 0,          //客户ID
            activeKey: "crm",        //选中的Tab
            isFromShow: true,       //
            data: {},                //客户基本信息 
            formRules: {},
            formErrors: {},
            formPostData: {},        //表单   
            initFormData: [],       //动态表单初始化数据  
            source: getQueryVariable(this.routeUrl, 'source') ? getQueryVariable(this.routeUrl, 'source') : "crm",
            FixedKeys: ["crmNo", "crmName", "phonetic"],  //固定的字段
            customizeList: [],      //当前source的所有自定义
            onOffDefineFields: [],    //启用的字段
            showEdit: false,
            //2021年10月19日18:13:49 gw
            isCompany: getQueryVariable(this.routeUrl, 'source') ? true : false,//是否是财务往来单位
            contactsAttrData: [],//往来分类
        }
    },
    created () {
        this.renderData(this.routeUrl);
        this.isCompany = getQueryVariable(this.routeUrl, 'source') ? true : false;//是否是财务往来单位\
        this.isFromShow = true;       //
        this.data = {};                //客户基本信息 
        this.formRules = {};
        this.formErrors = {};
        this.formPostData = {};       //表单   
        this.initFormData = [];       //动态表单初始化数据  
        this.GetCustomizeList();
    },
    watch: {
        routeUrl (val) {
            this.renderData(val);
            this.isCompany = getQueryVariable(val, 'source') ? true : false;//是否是财务往来单位\
            this.isFromShow = true;       //
            this.data = {};                //客户基本信息 
            this.formRules = {};
            this.formErrors = {};
            this.formPostData = {};       //表单   
            this.initFormData = [];       //动态表单初始化数据  
            this.GetCustomizeList();
        }
    },
    mounted () {
        setTimeout(() => {
            console.log("客户详情:activated", this.data);
        }, 500)
    },
    activated () {

    },
    //beforeRouteUpdate的触发是在动态路由情形下，比如 path: '/user/:userName' 这条路由，当页面不变更只动态的改变参数userName时，beforeRouteUpdate便会触发
    beforeRouteUpdate (to, from, next) {
        console.log("客户详情路由_更新前", to);
        //next方法使URL显示正常
        next()
        //数据改变的方法（此处为自定义的数据改变方法）
        this.renderData(to);
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        //是否显示 基本信息_保存按钮 
        saveBtnShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:detail:save"))
                || (crmType == 1 && permissions.includes("crm:potential:detail:save"))
                || (crmType == 2 && permissions.includes("crm:deals:detail:save"))
                || ( permissions.includes("vendor:save"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        // 是否显示 联系人
        linkManShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:linkMan"))
                || (crmType == 1 && permissions.includes("crm:potential:linkMan"))
                || (crmType == 2 && permissions.includes("crm:deals:linkMan"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("linkMan"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 联系记录
        touchShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:touch"))
                || (crmType == 1 && permissions.includes("crm:potential:touch"))
                || (crmType == 2 && permissions.includes("crm:deals:touch"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("touch"))
            ) {
                isShow = true;
            }
            return isShow;
        },
            //是否显示 电销记录
        taskCallRecordShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (permissions.includes("crm:call:taskCallRecord"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("taskCallRecord"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 商机管理
        businessShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:business"))
                || (crmType == 1 && permissions.includes("crm:potential:business"))
                || (crmType == 2 && permissions.includes("crm:deals:business"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("business"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 报价单
        priceShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:price"))
                || (crmType == 1 && permissions.includes("crm:potential:price"))
                || (crmType == 2 && permissions.includes("crm:deals:price"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("price"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 收货人信息
        consigneeShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:consignee"))
                || (crmType == 1 && permissions.includes("crm:potential:consignee"))
                || (crmType == 2 && permissions.includes("crm:deals:consignee"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("consignee"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 财务信息
        financeShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:finance"))
                || (crmType == 1 && permissions.includes("crm:potential:finance"))
                || (crmType == 2 && permissions.includes("crm:deals:finance"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("finance"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 客户文档
        filesShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:files"))
                || (crmType == 1 && permissions.includes("crm:potential:files"))
                || (crmType == 2 && permissions.includes("crm:deals:files"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("files"))
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 需求
        requirementShow: function () {
            const { customerId, data, permissions, userInfo } = this;
            const { crmType } = data;
            let isShow = false;
            if (
                (crmType == 0 && permissions.includes("crm:clue:requirement"))
                || (crmType == 1 && permissions.includes("crm:potential:requirement"))
                || (crmType == 2 && permissions.includes("crm:deals:requirement"))
                //是否分享
                || (data.shareType == 1 && data.shareUserId && data.shareUserId.includes(userInfo.id) && data.shareMenu && data.shareMenu.includes("requirement"))
            ) {
                isShow = true;
            }
            return isShow;
        },
    },
    methods: {
        renderData (currentRouter) {
            console.log("客户详情路由", currentRouter)
            if (currentRouter.indexOf('/crm/customer/detail') > -1) {
                // let { customerId, activeKey } = currentRouter.params;
                let customerId = currentRouter.split('/')[currentRouter.split('/').length - 2];
                let activeKey = currentRouter.split('/')[currentRouter.split('/').length - 1];

                if (this.isCompany) {
                    activeKey = 'crm';
                }
                Object.assign(this, {
                    customerId: parseInt(customerId),
                    activeKey
                });
                this.detail();
            }
        },
        //1.获取客户基本信息
        detail () {
            const { customerId } = this;
            detail({ id: customerId }).then(response => {
                console.log("获取客户详情", response);
                if (response.code === 200) {
                    const { data } = response;
                    // Object.assign(this, {
                    //     data,
                    //     formPostData: { ...data }
                    // });
                    this.data = response.data;
                    this.formPostData = { ...response.data };
                    // this.initCustomize();
                }
            }).catch(error => { });
        },
        //2...获取自定义字段配置 
        GetCustomizeList () {
            let { source, customizeList, onOffDefineFields } = this;
            const postData = {
                source
            };
            DefineFieldList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    customizeList = data;
                    onOffDefineFields = customizeList.filter(f => f.onOff);
                    Object.assign(this, {
                        customizeList,
                        onOffDefineFields,
                    });
                    //初始化 自定义列 数据
                    this.initMySetplainOptions(onOffDefineFields);
                    this.initCustomize();
                }
            }).catch(error => { });
        },
        //3.初始化 自定义列 数据源
        initMySetplainOptions (onOffDefineFields) {
            const {
                formRules,
                formErrors,
                formPostData,
                FixedKeys
            } = this;
            console.log("onOffDefineFields", onOffDefineFields)

            onOffDefineFields.forEach(f => {
                let code = f.code;
                if (f.dataType == 3 || f.dataType == 4) {
                    code = f.parentCode;
                }
                //可编辑字段
                else if (f.onEdit && !FixedKeys.includes(code)) {
                    //初始化 动态form表单 自定义列
                    this.initFormData.push(f);
                    //必填字段 
                    if (f.onFill) {
                        //初始化 校验对象和规则
                        formRules["formPostData." + f.code] = { test: "required" };
                    }
                    if ("email" == code) {
                        formRules["formPostData." + f.code] = { test: "email" };
                    }
                }
            });
            console.log("initFormData_", this.initFormData)
            //判断是否财务往来单位
            if (this.isCompany) {
                let data = _.cloneDeep(this.initFormData)
                this.initFormData = data.filter(b => b.dataTab != '往来分类');
                this.contactsAttrData = data.filter(b => b.dataTab == '往来分类')
            } else {
                let data = _.cloneDeep(this.initFormData)
                this.initFormData = data.filter(b => b.dataTab != '往来分类');
            }

            let vm = this;
            console.log("initValidator_formRules,", formRules);
            initValidator(vm, formRules, formErrors);
        },
        //4.保存 客户信息
        SaveCustomer () {
            const {
                formRules,
                formPostData,
                formErrors,
                onOffDefineFields
            } = this;
            console.log("提交的数据：", formPostData)
            //全部校验一次
            checkAll(this, formRules, formPostData, formErrors);
            if (Object.keys(formErrors).length > 0) {
                this.isFromShow = false;
                this.$nextTick(function () {
                    this.isFromShow = true;
                });
                return false;
            }
            //自定义字段 重组
            let defineFieldsSets = onOffDefineFields.filter(f => f.dataType == 2);
            let defineFields = {};
            //获取重组后的自定义集合
            this.getDefineFields(defineFields, formPostData, defineFieldsSets);
            Object.assign(formPostData, {
                defineFields: JSON.stringify(defineFields)
            });
            let _this = this;
            SaveCustomer(formPostData).then(response => {
                console.log("SaveCustomer_response.code", response.code);
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    this.showEdit = false;
                    if (this.customerId) {
                        MiddleUtils.$emit('syncList')
                    }
                    this.reloadData();

                }
            })
        },
        //5.初始化 自定义的值
        initCustomize () {
            const { defineFields } = this.formPostData;
            const { onOffDefineFields, formPostData } = this;
            let defineFieldsObj = JSON.parse(defineFields);
            let defineFieldsSets = onOffDefineFields.filter(f => f.dataType == 2);
            defineFieldsSets.forEach(item => {
                const { id, code, name } = item;
                let value = defineFieldsObj[id + ""];
                if (value) {
                    this.$set(this.formPostData, code, value);
                }
            });
            console.log("5.初始化 自定义的值", formPostData)
        },
        //6.获取重组后的自定义集合
        getDefineFields (defineFields, formPostData, defineFieldsSets) {
            defineFieldsSets &&
                defineFieldsSets.forEach(item => {
                    const { id, code, name } = item;
                    let val = formPostData[code];
                    if (val) {
                        defineFields[id + ""] = val;
                    }
                });
        },
        //7.查询 载入数据
        reloadData () {
            this.detail();
        }
    },
}
</script>
<style lang="less" scoped>
.ant-tabs-nav .ant-tabs-tab{
    margin: 0 !important;
}
</style>
<style lang="less">
    .crm-name {
        height: 62px;
        line-height: 62px;
        font-size: 18px;
    }
    .crm-name:before {
        content: '';
        padding-left: 4px;
        margin-right: 5px;
        height: 100%;
        background: #1890ff;
    }
    .crm-detail {
        .ant-tabs-bar {
            margin-bottom: 0px;
        }
        .myRightClass {
            input,
            .ant-select {
                overflow: hidden;
            }
        }
        .ant-tabs,
        .ant-tabs-content,
        .ant-tabs-tabpane-active {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .crm-pane {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 0;
            overflow: scroll;
            .ant-select-sm,
            .ant-input-sm,
            .ant-input-number,
            .ant-input-number-input {
                height: 32px !important;
            }

            .ant-select-selection__rendered,
            .ant-select-selection-selected-value,
            .ant-select-selection {
                height: 32px;
                line-height: 32px;
            }
        }
        .content-wrapper {
            min-height: auto !important;
            height: auto !important;
            flex-grow: 1 !important;
            margin: 0px !important;
            .content-header {
                margin: 0 !important;
                padding: 0 !important;
            }
        }
    }
    .show-status {
        .ant-input,
        .ant-input-sm,
        .ant-select-selection,
        .ant-select-sm {
            border: 1px solid #ffffff;
        }
        .ant-input-group-addon {
            display: none;
        }
        .ant-select-arrow {
            display: none;
        }
        .show-status-mask {
            width: 965px;
            height: 100%;
            position: absolute;
            z-index: 200;
            background: rgba(180, 180, 35, 0.1);
        }
    }
</style>
